<template>
  <div>
    <div><h3 style="margin-bottom: 10px;margin-left: 10px">基本信息</h3></div>
    <Form style="margin-left: 50px" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <FormItem label="服务类型" prop="type">
        <Select v-model="formValidate.type" placeholder="选择服务类型">
          <Option value="1">dal</Option>
          <Option value="2">cloud</Option>
          <Option value="3">app/oms</Option>
        </Select>
      </FormItem>
      <FormItem label="服务名称" prop="service">
        <Input v-model="formValidate.service" placeholder="填写服务名称"></Input>
      </FormItem>
<!--      <FormItem label="备注" prop="desc">-->
<!--        <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>-->
<!--      </FormItem>-->
      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
<!--        <Button @click="handleReset('formValidate')" style="margin-left: 8px">保存并继续添加</Button>-->
      </FormItem>
    </Form>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'AddPort',
  inject: ['reload'],
  data() {
    return {
      formValidate: {
        type: '',
        service: '',
        // desc: ''
      },
      ruleValidate: {
        service: [
          {required: true, message: '这个字段是必填项', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (
                  (this.formValidate.type === '1' && !value.endsWith('dal')) ||
                  (this.formValidate.type === '2' && !value.endsWith('cloud')) ||
                  (this.formValidate.type === '3' && !value.endsWith('app') && !value.endsWith('oms'))
              ) {
                callback(new Error('服务名称不符合要求,根据选择的服务类型服务名称需要以 -dal、-cloud、-app、-oms 结尾'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        type: [
          {required: true, message: '选择服务类型', trigger: 'change'}
        ],
        desc: [
          {message: 'Please enter a personal introduction', trigger: 'blur'},
          {type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          this.$Message.error('提交失败!');
        }
      })
    },
    // handleReset(name) {
    //   this.$refs[name].resetFields();
    // },
    saveData() {
      axios.post(`http://172.30.53.223:8888/api/addport?type=${this.formValidate.type}&service=${this.formValidate.service}`, this.formValidate)
          .then(() => {

            // 数据保存成
            this.$Message.success('保存成功!');
            this.$refs['formValidate'].resetFields();
            this.reload();
          })
          .catch(error=> {
            this.$Message.error(error.response.data.error);
          });
      }
    }
  }
</script>
